$("#p p:first-child").animate({
    left: 10 + "rem"
}, 500);
$("#p p:last-child").animate({
    opacity: 1
}, 1000);
var index = 0;

function dm() {

    $(".bottom img").animate({
        bottom: 3 + "rem",
        opacity: 1
    }, 500, )

    $(".bottom img").animate({
        bottom: 2 + "rem"
    }, 500)
    $("#bottom").animate({
        opacity: 0
    }, 300)
    $("#bottom").animate({
        opacity: 1
    }, 1000)

};
setTimeout(function() { setInterval(dm, 1000); }, 3000);
setTimeout(function() {
    hua()
    var a = 0
    var timi = setInterval(function() {
        a++
        if (a > 10) {
            clearInterval(timi);
        }
        $("#bg img").css({
            transform: "scale(" + a + ")",
        });

    }, 100)
}, 1000);
setTimeout(function() {
    $("#zhe").animate({
        width: 2 + "rem",
        height: 2 + "rem"
    }, 1000)
}, 3000)


function hua() {
    $(".ren1").animate({
        top: 5 + "rem",
        left: 7.9 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 2000)
    $(".ren2").animate({
        top: 15 + "rem",
        left: 1 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 1800)
    $(".ren3").animate({
        top: 25 + "rem",
        left: 3 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 1000)
    $(".ren4").animate({
        top: 15 + "rem",
        left: 18 + "rem",
        right: 2.78 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 2500)
    $(".ren5").animate({
        top: 25 + "rem",
        left: 16.3 + "rem",
        right: 1.78 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 1800)
    $(".ren6").animate({
        top: 5 + "rem",
        left: 1.84 + "rem",
        // right: 2.78 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 900)
    $(".ren7").animate({
        top: 6 + "rem",
        left: 16 + "rem",
        // right: 2.78 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 1000)
    $(".ren8").animate({
        top: 27 + "rem",
        left: 10.9 + "rem",
        // right: 2.78 + "rem",
        width: 4.34 + "rem",
        height: 4.34 + "rem",
        margin: 0,
    }, 1700)
}
// 点击头像
$(".ren img").click(function() {
        var a = 0;
        index = $(this).index();
        console.log($("#img"));
        $("#img img:eq(" + index + ")").css({
                transform: "scale(" + 0 + ")",
            })
            // 显现
        $(".zhe").css({
            display: "block",
        })
        $("#img").css({
            display: "block",
        })
        $("#left").css({
            display: "block",
        })
        $("#right").css({
                display: "block",
            })
            // 移动图片
        $("#img").css({
            left: index * -24 + "rem"
        })
        console.log($("#img img:eq(" + index + ")"));
        // 缩放动画
        var time = setInterval(function() {
            a = a + 0.1;
            if (a > 1) { clearInterval(time) }
            $("#img img:eq(" + index + ")").css({
                transform: "scale(" + a + ")",
            })
        }, 100)

    })
    // 关闭
$("#x").click(function() {
    var b = 1;
    var time2 = setInterval(function() {
            b = b - 0.1;
            if (b < 0) {
                clearInterval(time2);
                b = 0
            }
            $("#img img:eq(" + index + ")").css({
                transform: "scale(" + b + ")",
            })
        }, 100)
        // 隐藏
    $(".zhe").css({
        display: "none",
    })
    $("#left").css({
        display: "none",
    })
    $("#right").css({
        display: "none",
    })
    setTimeout(function() {
        $("#img").css({
            display: "none",
        })
    }, 1000)

})

// 轮播点击切换图片
$("#left").click(function() {
    index++;
    if (index > 7) {
        index = 7
    }
    $("#img").animate({
        left: index * -24 + "rem"
    }, 500)
    $("#img img").css({
        transform: "scale(" + 1 + ")",
    })
})
$("#right").click(function() {
    index--;
    $("#img img").css({
        transform: "scale(" + 1 + ")",
    })
    if (index < 0) {
        index = 0
    }
    $("#img").animate({
        left: index * -24 + "rem"
    }, 500)
})